Applied Metaphors: Learning TRIZ, Complexity, Data/Stats/ML using Metaphors
  1. Using Lordicons, Fontawesome Icons,Academicons, and Iconify Icons

Alert - I have split up this Huge website into smaller ones. Please check out the new site URLs on the Home page for the latest course content. This website will not be updated anymore. Thanks for your patience and support! 🙏

  • Teaching
    • Data Viz and Analytics
      • Tools
        • Introduction to R and RStudio
        • Introduction to Radiant
        • Introduction to Orange
      • Descriptive Analytics
        • Data
        • Graphs
        • Summaries
        • Counts
        • Quantities
        • Groups
        • Densities
        • Groups and Densities
        • Change
        • Proportions
        • Parts of a Whole
        • Evolution and Flow
        • Ratings and Rankings
        • Surveys
        • Time
        • Space
        • Networks
        • Experiments
        • Miscellaneous Graphing Tools, and References
      • Statistical Inference
        • 🧭 Basics of Statistical Inference
        • 🎲 Samples, Populations, Statistics and Inference
        • Basics of Randomization Tests
        • 🃏 Inference for a Single Mean
        • 🃏 Inference for Two Independent Means
        • 🃏 Inference for Comparing Two Paired Means
        • Comparing Multiple Means with ANOVA
        • Inference for Correlation
        • 🃏 Testing a Single Proportion
        • 🃏 Inference Test for Two Proportions
      • Inferential Modelling
        • Modelling with Linear Regression
        • Modelling with Logistic Regression
        • 🕔 Modelling and Predicting Time Series
      • Predictive Modelling
        • 🐉 Intro to Orange
        • ML - Regression
        • ML - Classification
        • ML - Clustering
      • Prescriptive Modelling
        • 📐 Intro to Linear Programming
        • 💭 The Simplex Method - Intuitively
        • 📅 The Simplex Method - In Excel
      • Workflow
        • Facing the Abyss
        • I Publish, therefore I Am
      • Using AI in Analytics
      • Case Studies
        • Demo:Product Packaging and Elderly People
        • Ikea Furniture
        • Movie Profits
        • Gender at the Work Place
        • Heptathlon
        • School Scores
        • Children’s Games
        • Valentine’s Day Spending
        • Women Live Longer?
        • Hearing Loss in Children
        • California Transit Payments
        • Seaweed Nutrients
        • Coffee Flavours
        • Legionnaire’s Disease in the USA
        • Antarctic Sea ice
        • William Farr’s Observations on Cholera in London
    • TRIZ for Problem Solvers
      • I am Water
      • I am What I yam
      • Birds of Different Feathers
      • I Connect therefore I am
      • I Think, Therefore I am
      • The Art of Parallel Thinking
      • A Year of Metaphoric Thinking
      • TRIZ - Problems and Contradictions
      • TRIZ - The Unreasonable Effectiveness of Available Resources
      • TRIZ - The Ideal Final Result
      • TRIZ - A Contradictory Language
      • TRIZ - The Contradiction Matrix Workflow
      • TRIZ - The Laws of Evolution
      • TRIZ - Substance Field Analysis, and ARIZ
    • Math Models for Creative Coders
      • Maths Basics
        • Vectors
        • Matrix Algebra Whirlwind Tour
        • content/courses/MathModelsDesign/Modules/05-Maths/70-MultiDimensionGeometry/index.qmd
      • Tech
        • Tools and Installation
        • Adding Libraries to p5.js
        • Using Constructor Objects in p5.js
      • Geometry
        • Circles
        • Complex Numbers
        • Fractals
        • Affine Transformation Fractals
        • L-Systems
        • Kolams and Lusona
      • Media
        • Fourier Series
        • Additive Sound Synthesis
        • Making Noise Predictably
        • The Karplus-Strong Guitar Algorithm
      • AI
        • Working with Neural Nets
        • The Perceptron
        • The Multilayer Perceptron
        • MLPs and Backpropagation
        • Gradient Descent
      • Projects
        • Projects
    • Tech for Creative Education
      • 🧭 Using Idyll
      • 🧭 Using Apparatus
      • 🧭 Using g9.js
    • Literary Jukebox: In Short, the World
      • Italy - Dino Buzzati
      • France - Guy de Maupassant
      • Japan - Hisaye Yamamoto
      • Peru - Ventura Garcia Calderon
      • Russia - Maxim Gorky
      • Egypt - Alifa Rifaat
      • Brazil - Clarice Lispector
      • England - V S Pritchett
      • Russia - Ivan Bunin
      • Czechia - Milan Kundera
      • Sweden - Lars Gustaffsson
      • Canada - John Cheever
      • Ireland - William Trevor
      • USA - Raymond Carver
      • Italy - Primo Levi
      • India - Ruth Prawer Jhabvala
      • USA - Carson McCullers
      • Zimbabwe - Petina Gappah
      • India - Bharati Mukherjee
      • USA - Lucia Berlin
      • USA - Grace Paley
      • England - Angela Carter
      • USA - Kurt Vonnegut
      • Spain-Merce Rodoreda
      • Israel - Ruth Calderon
      • Israel - Etgar Keret
  • Posts
  • Blogs and Talks

On this page

  • Introduction
  • Installation
  • Using Lordicon Shortcodes
    • Triggers
    • Speed
    • Colors
    • Stroke
    • Scale
    • Axis X
    • Axis Y
  • Using Academicons Shortcodes
  • Using Fontawesome Icons
  • Using Iconify Shortcodes

Using Lordicons, Fontawesome Icons,Academicons, and Iconify Icons

Author

Arvind V.

Published

January 9, 2023

Modified

Invalid Date

Introduction

This is just a compilation of the example files from the Quarto website, so that I can have ready-made code to copy and paste.

Installation

Type these in your Terminal:

  • Iconify: quarto install extension mcanouil/quarto-iconify
  • FontAwesome: quarto install extension quarto-ext/fontawesome
  • Lordicons: quarto install extension jmgirard/lordicon
  • Academicons: quarto install extension schochastics/academicons

These extensions allows you to use a variety of icons in your Quarto HTML documents.

Using Lordicon Shortcodes

The {{< li >}} shortcode renders an icon (specified by its code) after downloading it the lordicon CDN. The {{< lif >}} shortcode renders an icon (specified by its filepath) from a local .json file. Both shortcodes support the same arguments for customization, described below.

Pseudocode Example Code Rendered
{{< li code >}} {{< li wlpxtupd >}}

{{< lif file >}} {{< lif church.json >}}

Triggers

trigger controls the icon’s animation type. When using the loop or loop-on-hover triggers, you can also set an optional delay (in ms) between loops.

Shortcode Icon
{{< li wxnxiano >}}

{{< li wxnxiano trigger=click >}}

{{< li wxnxiano trigger=hover >}}

{{< li wxnxiano trigger=loop >}}

{{< li wxnxiano trigger=loop delay=1000 >}}

{{< li wxnxiano trigger=loop-on-hover >}}

{{< li wxnxiano trigger=loop-on-hover delay=1000 >}}

{{< li wxnxiano trigger=morph >}}

{{< li wxnxiano trigger=boomerang >}}

Speed

speed controls how quickly the icon’s animation plays.

Shortcode Icon
{{< li lupuorrc trigger=loop speed=0.5 >}}

{{< li lupuorrc trigger=loop speed=1.0 >}}

{{< li lupuorrc trigger=loop speed=2.0 >}}

Colors

colors controls the icon’s coloring. Outline icons typically have just a primary and secondary color, but flat and lineal icons can have many more. Each color should be given in rank:color format (where ranks are primary, secondary, tertiary, etc.) and multiple colors should be separated by commas. Colors can be given in HTML color names or hexcodes.

Shortcode Icon
{{< li lupuorrc >}}

{{< li lupuorrc colors=primary:gold >}}

{{< li lupuorrc colors=primary:gray,secondary:orange >}}

{{< li lupuorrc colors=primary:#4030e8,secondary:#ee66aa >}}

Stroke

stroke controls how thick the lines in an icon are.

Shortcode Icon
{{< li lupuorrc stroke=50 >}}

{{< li lupuorrc stroke=100 >}}

{{< li lupuorrc stroke=150 >}}

Scale

scale controls how large or zoomed in the icon is.

Shortcode Icon
{{< li lupuorrc scale=25 >}}

{{< li lupuorrc scale=50 >}}

{{< li lupuorrc scale=100 >}}

Axis X

x controls the horizontal position of the center of the icon.

Shortcode Icon
{{< li lupuorrc x=25 >}}

{{< li lupuorrc x=50 >}}

{{< li lupuorrc x=100 >}}

Axis Y

y controls the vertical position of the center of the icon.

Shortcode Icon
{{< li lupuorrc y=25 >}}

{{< li lupuorrc y=50 >}}

{{< li lupuorrc y=100 >}}

Using Academicons Shortcodes

This extension allows you to use academicons in your Quarto HTML documents. It provides an {{< ai >}} shortcode:

  • Mandatory <icon-name>:

    {{< ai <icon-name> >}}
  • Optional <size=...>:

    {{< ai <icon-name> <size=...> >}}

For example:

Shortcode Icon
{{< ai arxiv >}}

{{< ai google-scholar >}}

{{< ai open-access >}}

{{< ai open-access size=5x >}}

Using Fontawesome Icons

This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides an {{< fa >}} shortcode:

  • Mandatory <icon-name>:

    {{< fa <icon-name> >}}
  • Optional <group>, <size=...>, and <title=...>:

    {{< fa <group> <icon-name> <size=...> <title=...> >}}

For example:

Shortcode Icon
{{< fa thumbs-up >}}

{{< fa folder >}}

{{< fa chess-pawn >}}

{{< fa brands bluetooth >}}

{{< fa brands twitter size=2xl >}} (HTML only)

{{< fa brands github size=5x >}} (HTML only)

{{< fa battery-half size=Huge >}}

{{< fa envelope title="An envelope" >}}

Using Iconify Shortcodes

This extension allows you to use Iconify icons in your Quarto HTML documents. It provides an {{< iconify >}} shortcode:

  • Mandatory <icon-name>:

    {{< iconify <icon-name> >}}
  • Optional <set> (default is fluent-emoji) <size=...>, <width=...>, <height=...>, <flip=...>, and <rotate=...>:

    {{< iconify <set> <icon-name> <size=...> <width=...> <height=...> <flip=...> <rotate=...> >}}

    If <size=...> is defined, <width=...> and <height=...> are not used.
    See https://docs.iconify.design/iconify-icon/ for more details.

For example:

Shortcode Icon
{{< iconify exploding-head >}}

{{< iconify exploding-head size=2xl >}}

{{< iconify exploding-head size=5x rotate=180deg >}}

{{< iconify exploding-head size=Huge >}}

{{< iconify fluent-emoji-high-contrast 1st-place-medal >}}

{{< iconify twemoji 1st-place-medal >}}

{{< iconify line-md loading-alt-loop >}}

{{< iconify fa6-brands apple width=50px height=10px rotate=90deg flip=vertical >}}

Back to top

License: CC BY-SA 2.0

Website made with ❤️ and Quarto, by Arvind V.

Hosted by Netlify .